<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>镜像站@layout 管理界面大布局示例 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="layui/css/layui.css" >
    <link rel="stylesheet" href="css/article.css" media="all">
    <script src="layui/layui.all.js"></script>
<!--    <style>-->
<!--        /* 移动端 */-->
<!--        @media screen and (max-width: 768px) {-->
<!--            .layui-layout-admin .layui-layout-left,-->
<!--            .layui-layout-admin .layui-body,-->
<!--            .layui-layout-admin .layui-footer{left: 0;}-->
<!--            .layui-layout-admin .layui-side{left: -300px;}-->
<!--        }-->
<!--    </style>-->

    <style type="text/css">
        .layui-table-cell {
            text-align: center;
            height: auto;
            white-space: normal;
        }

        .layui-table img {
            width: 100px;
            height:60px;
        }
        /*.layui-field-box{*/
        /*    background-color: #00acac;*/
        /*}*/
        #titleBar,#statusBar,#titlePop,#autherPop{
            border: 0px ;
            background-color: #FFFFFF;
            width: 90px;
            font-size: 15px;
            font-weight: bold;
        }

    </style>

</head>
<body>

        <!-- 内容主体区域 -->
        <div>
            <!-- 内容主体区域  面包屑-->
<!--            <span class="layui-breadcrumb" id="breadcrumb">-->
            <span class="breadcrumb">
              <a><span>首页</span></a>
              <a><cite>内容管理</cite></a>
              <a href="article.html">文章管理</a>
            </span>
            <!-- 水平线 -->
            <hr class="layui-bg-white">

            <!-- 搜索条件 -->
            <fieldset class="layui-elem-field" style="border: 0px;height:50px">
<!--                <legend>筛选条件</legend>-->
                <div class="layui-field-box" style="display: flex">
                    <div class="layui-form-item layui-form-pane">
                        <div class="layui-form-label" id="titleBar">文章标题</div>
                        <div class="layui-input-inline">
                            <input type="text" id="search_title" placeholder="请输入文章标题" class="layui-input">
                        </div>



<!--                        <div class="layui-form-item  layui-form-pane" >-->
                            <label class="layui-form-label" id="statusBar">状态</label>
<!--                            <div class="layui-input-block">-->
                                <select name="interest" lay-filter="aihao" id="search_status1" class="layui-input-inline" style="height: 38px;">
                                    <option value="1">启动</option>
                                    <option value="0">禁用</option>
                                </select>
<!--                            </div>-->
<!--                        </div>-->


<!--                        <div class="layui-form-label" id="statusBar">状态</div>-->
<!--                        <div class="layui-input-inline">-->
<!--                            <input type="text" id="search_status" placeholder="状态" class="layui-input">-->
<!--                        </div>-->
<!--                        <script type="text/html" id="toolbarDemo">-->
                        <div class="layui-btn-container" style="padding-top: 4px; padding-left: 590px;">
                            <button class="layui-btn layui-btn-sm" lay-event="isAll" id="searchVal">搜索</button>
                            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength" id="updateVal">重置</button>
                            <button class="layui-btn layui-btn-sm" lay-event="insertArticle" id="addDemo">新增</button>
                        </div>
<!--                        </script>-->

                    </div>


                </div>
            </fieldset>


            <table class="layui-hide" id="test" lay-filter="test"></table>


            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>



            <script type="text/html" id="insert_form">
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label" id="titlePop">标题</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_title" class="layui-input" placeholder="请输入标题">
                        </div>
                    </div>

<!--                    <div class="layui-form-item layui-form-pane">-->
<!--                        <label class="layui-form-label" id="autherPop">创作者</label>-->
<!--                        <div class="layui-input-inline">-->
<!--                            <input type="text" id="insert_author" class="layui-input" placeholder="请输入创作者名称">-->
<!--                        </div>-->
<!--                    </div>-->

                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="up">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                    </div>

<!--                    <div class="layui-form-item" >-->
<!--                        <label class="layui-form-label">单选框</label>-->
<!--                        <div class="layui-input-block" style="padding-top: 10px">-->
<!--                            <input type="radio" name="status" value="启动" title="启动" checked="" class="statusUp">-->
<!--                            <input type="radio" name="status" value="禁用" title="禁用" class="statusDown">-->
<!--                        </div>-->
<!--                    </div>-->

                </div>


            </script>
<!--            <div class="layui-input-block">-->
<!--                <button type="button" class="layui-btn" id="up">-->
<!--                    <i class="layui-icon">&#xe67c;</i>上传图片-->
<!--                </button>-->
<!--            </div>-->

            <script type="text/html" id="update_form">
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-inline">
                            <input type="text" id="update_title" class="layui-input" placeholder="请输入标题">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label" id="autherPic">图片</label>
                        <div class="layui-input-inline">
                            <input type="text" id="update_pic" class="layui-input" placeholder="请输入图片名称">
                        </div>
                    </div>

                </div>
            </script>

<!--            <script type="text/html" id="imgTpl">-->
<!--                <img src="/images/#{{imgPath}}">-->
<!--            </script>-->

        </div>



<script src="layui/layui.js"></script>
<script src="jquery/jquery-3.6.0.js"></script>
<script>

    // $("#upEdit").click(function () {
    //     console.log(1);
    //     upLoad();
    // });
    let username = sessionStorage.getItem("username");
    console.log(username);
   // $("#addDemo").text(username);




    let ImgName = '';

    $(".layui-btn").click(function () {
        console.log(1);
        upLoad();
    });

    function upLoad(){
    layui.use('upload', function(){
        let upload = layui.upload;
        let $ = layui.$;
        //执行实例
        let uploadInst = upload.render({
            elem: '#up' //绑定元素
            ,url: '/article/upload' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                console.log(res);
                ImgName = res.name;
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });
    };


    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,title: '更多'
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                    ,scrollbar: false
                });

            }
        });


    });
    $("#updateVal").click(function () {
        tableFlush();
    });


    $("#searchVal").click(function () {
            // let article_status = $("#search_status").val();
            let article_title = $("#search_title").val();
            let article_status = $("#search_status1 option:selected").val();
            // console.log(article_title);
            console.log(article_status);
            // let search_shop = $("#search_shop").val("value");
            // let search_sex = $("#search_sex").val();
            let whereJSON = {};
            if (article_title != null && article_title != '') {
                whereJSON.article_title = article_title;
            }
            if (article_status != null && article_status != '') {
                whereJSON.article_status = article_status;
            }
            tableFlush(whereJSON);
    });

    function tableFlush(whereJSON) {
        // console.log(article_title);
        console.log(whereJSON);
        layui.use('table', function() {
            var table = layui.table;
            console.log(table);
            // var d = layui.table.cache;
            // console.log(d);
            //  render  渲染
            table.render({
                elem: '#test'
                , url: '/article/selectByPage'
                , where: whereJSON
                // , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: false
                //     ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                //     title: '提示'
                //     , layEvent: 'LAYTABLE_TIPS'
                //     , icon: 'layui-icon-tips'
                // }]
                , title: '用户数据表'
                , cols: [[
                    // {type: 'checkbox', fixed: 'left'}
                    , {
                        title: 'ID', width: 46, unresize: true, templet: function (res) {
                            return '<em  style="width=60px">' + res.article_ID + '</em>'
                        }
                    }
                    // ,{title:'图片', width:200, unresize: true, templet: '<div><img src="/images/#{{res.article_pic}}"></div>'}
                    , {
                        title: '图片', width: 200, unresize: true, templet: function (res) {
                            return '<div><img src="/images/' + res.article_pic + '"></div>'
                            // return res.article_pic
                        }
                    }
                    , {
                        title: '文章标题', width: 200, unresize: true, templet: function (res) {
                            return '<em>' + res.article_title + '</em>'
                        }
                    }
                    , {
                        title: '点击数', width: 120, unresize: true, templet: function (res) {
                            return '<em>' + res.article_click + '</em>'
                        }
                    }
                    , {
                        field: 'status',title: '状态', width: 120, unresize: true, templet: function (res) {
                            let article_ID = res.article_ID;
                            //console.log(menuId);
                            if (res.article_status == 1) {
                                return "   <input id='kg' type='checkbox'  article_ID = '" + article_ID + "' lay-filter='status' lay-skin='switch' checked >"
                            } else if (res.article_status == 0) {
                                return "   <input id='kg' type='checkbox'  article_ID = '" + article_ID + "'  lay-filter='status' lay-skin='switch' >"
                            }
                        }
                    }

                    , {
                        title: '创建者', width: 180, unresize: true, templet: function (res) {
                            return '<em>' + res.article_author + '</em>'
                        }
                    }
                    , {
                        title: '创建时间', width: 180, unresize: true, templet: function (res) {
                            return '<em>' + res.article_time + '</em>'
                        }
                    }
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]]
                , page: true
            });



            layui.form.on('switch(status)', function (data) {
                // var status = this.status;
                // var name = this.name;
                // layer.tips(status + ' ' + name + ': '+ obj.elem.checked, obj.othis);
                console.log(this.checked);
                if(this.checked){
                    data.value=1;
                }else{
                    data.value=0;
                }
                // this.checked? data.value=1:data.value=0;  //更改选中和未选中时，传动后台的值，此时选中传1，未选中传0。
                console.log(data.value);
                // layer.msg('状态：' + (this.checked ? 'on' : 'off'), {
                //     offset: '6px',
                //     time: 500,
                // });
                let article_ID = data.elem.attributes['article_ID'].nodeValue;
                console.log(article_ID);

                // if(data.elem.checked) {
                    $.ajax({
                        url: "/article/setStatus",           // 请求路径
                        type: "post",                  // 请求的方式，不区分大小写
                        cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify({
                            article_ID: article_ID,
                            article_status: data.value
                        }),
                        datatype: "json",        // 返回类型，text文本、html页面、json数据
                        success: function (response) {
                            console.log("返回: " + response);
                            if (response.code === 200) {
                                layer.msg("修改成功!");
                                //  layer.close(index);                         // 关闭当前窗口
                                // tableFlush();
                                table.reload('test', {});
                            }
                        },
                        error: function (response) {
                            console.log("出错返回: " + response);
                        }
                    });

                    // table.reload('test', {});
                    // var kg = data.value; //将该值传到后端即可使用。（如，直接在ajax中传值）
                    // console.log(kg);
                    // console.log(data);
                    // console.log(data.id);
                    // console.log(data.status);
                    // console.log(data.elem); //得到checkbox原始DOM对象
                    // console.log(data.elem.checked); //开关是否开启，true或者false
                    // console.log(data.value); //开关value值，也可以通过data.elem.value得到
                    // console.log(data.othis); //得到美化后的DOM对象
                    // });
                // }
        });
     })
    }

    // let startStatus=0;
    // $(".statusUp").click(function () {
    //     startStatus = 1;
    //     console.log(startStatus)
    // });
    //
    // $(".statusDown").click(function () {
    //     startStatus = 0;
    //     console.log(startStatus)
    // });


    $(document).on('click',"#addDemo",function(){
        // var table = layui.table;
        // layer.msg("按钮点击");
        // var checkStatus = table.checkStatus(obj.config.id);
        // console.log(checkStatus)
        // 过滤
        function checkTime (i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
        // 获取时间
        function getTime() {
            var nowdate = new Date();
            var year = nowdate.getFullYear(),
                month = nowdate.getMonth() + 1,
                date = nowdate.getDate(),
                day = nowdate.getDay(),
                week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                h = nowdate.getHours(),
                m = nowdate.getMinutes(),
                s = nowdate.getSeconds(),
                h = checkTime(h),
                m = checkTime(m),
                s = checkTime(s);
            return year+'-'+month+'-'+date+ "-"+h+':'+m+':'+s
        }
        layer.open({     // 弹出框处理  模态框
            type: 1               // 模态框
            ,title: '新增文章' //不显示标题栏
            ,closeBtn: false
            ,area: ['500px','250px']  // 宽和高
            ,shade: 0.5
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,btn: ['新增', '取消']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: $('#insert_form').html()         // 引入自定义表单
            ,btn1: function(index, layero){            // 这个是新增按钮点击事件
                // layer.msg("新增按钮执行");
                let article_time = getTime();
                let article_title = $("#insert_title").val();
                let article_author = username;
                // let article_pic = $("#insert_pic").val();
                let article_pic = ImgName;

                $.ajax({
                    url:"/article/insert",           // 请求路径
                    type:"post",                  // 请求的方式，不区分大小写
                    cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                    contentType:"application/json;charset=utf-8",
                    data: JSON.stringify({
                        article_title:article_title,
                        article_author:article_author,
                        article_pic:article_pic,
                        article_time:article_time
                    }),
                    datatype:"json",        // 返回类型，text文本、html页面、json数据
                    success:function(response){
                        console.log("返回: " + response);
                        if(response.code === 200) {
                            layer.msg("新增文章成功!");
                            layer.close(index);                         // 关闭当前窗口
                            tableFlush();
                        }
                    },
                    error:function(response){
                        console.log("出错返回: " + response);
                    }
                });
            }
            ,success: function(layero){}
        });
    });


    layui.use('table', function(){



        var table = layui.table;
        console.log(table);


        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            console.log(data)
            if(obj.event === 'del'){
                layer.confirm('是否确认删除文章数据项？', function(index){
                    // obj.del();
                    $.ajax({
                        url:"/article/deleteById",           // 请求路径
                        type:"post",                  // 请求的方式，不区分大小写
                        cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                        data:({
                            article_ID:data.article_ID,
                        }),
                        datatype:"json",        // 返回类型，text文本、html页面、json数据
                        success:function(response){
                            console.log("返回: " + response);
                            if(response.code === 200) {
                                layer.msg("删除文章成功!");
                                layer.close(index);                         // 关闭当前窗口
                                tableFlush();
                            }
                        },
                        error:function(response){
                            console.log("出错返回: " + response);
                        }
                    });
                    // layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.open({     // 弹出框处理  模态框
                    type: 1               // 模态框
                    ,title: '修改文章' //不显示标题栏
                    ,closeBtn: false
                    ,area: ['500px','250px']  // 宽和高
                    ,shade: 0.5
                    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,btn: ['确定', '取消']
                    ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: $('#update_form').html()         // 引入自定义表单
                    ,btn1: function(index, layero){            // 这个是新增按钮点击事件
                        // layer.msg("新增按钮执行");
                        let article_title = $("#update_title").val();
                        let article_pic = $("#update_pic").val();
                        $.ajax({
                            url:"/article/updateById",           // 请求路径
                            type:"post",                  // 请求的方式，不区分大小写
                            cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                            contentType:"application/json;charset=utf-8",
                            data: JSON.stringify({
                                article_ID:data.article_ID,
                                article_title:article_title,
                                article_pic:article_pic
                            }),
                            datatype:"json",        // 返回类型，text文本、html页面、json数据
                            success:function(response){
                                console.log("返回: " + response);
                                if(response.code === 200) {
                                    layer.msg("修改文章成功!");
                                    layer.close(index);                         // 关闭当前窗口
                                    tableFlush();
                                }
                            },
                            error:function(response){
                                console.log("出错返回: " + response);
                            }
                        });
                    }
                    ,success: function(layero){

                    }
                });
            }
        });
    });

    tableFlush();

</script>
        <style>
            .layui-breadcrumb a {
                color: black !important;
            }
            .layui-breadcrumb{
                padding: 10px;
            }
        </style>
</body>
</html>
